<template>
  <el-dialog
    :title="isAdd ? '创建触达' : '编辑'"
    :visible.sync="dialogData.isShow"
    width="580px"
    :before-close="labelHandleClose"
  >
    <el-form ref="addFormEl" :model="form" :rules="formRules">
      <el-form-item label="触达用户" label-width="90px" prop="labels">
        <el-select v-model="form.rolesName" placeholder="请选择">
          <el-option label="全部" value="all"></el-option>
          <el-option label="一部分" value="parts"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="触达时间" label-width="90px" prop="rolesChars">
        <el-date-picker
          v-model="form.rolesChars"
          type="datetime"
          placeholder="请选择"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="触达通道" label-width="90px" prop="order">
        <el-select
          v-model="form.order"
          placeholder="请选择"
          @change="HandleChange"
        >
          <el-option label="短信" value="message"></el-option>
          <el-option label="推送" value="push"></el-option>
          <el-option label="站内信" value="inMessage"></el-option>
          <el-option label="弹幕" value="barrage"></el-option>
          <el-option label="公众号" value="public"></el-option>
          <el-option label="小程序" value="small"></el-option>
        </el-select>
      </el-form-item>
      <!--短信组-->
      <div v-if="diff === 'message'">
        <el-form-item label="内容" prop="mes_context">
          <el-input
            v-model="form.mes_context"
            type="textarea"
            rows="3"
            placeholder="请输入"
            resize="none"
          ></el-input>
        </el-form-item>
      </div>
      <!--推送组-->
      <div v-if="diff === 'push'">
        <el-form-item label="标题" prop="push_title">
          <el-input v-model="form.push_title" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="push_context">
          <el-input
            v-model="form.push_context"
            type="textarea"
            rows="3"
            placeholder="请输入"
            resize="none"
          ></el-input>
        </el-form-item>
      </div>
      <!--站内信组-->
      <div v-if="diff === 'inMessage'">
        <el-form-item label="标题" prop="inmes_title">
          <el-input v-model="form.inmes_title" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="接收类型">
          <el-radio-group v-model="form.inmes_receive" size="small">
            <el-radio label="notice" border>
              通知
            </el-radio>
            <el-radio label="active" border>
              活动
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label prop="inmes_image">
          <el-upload
            class="notice-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleNoticeSuccess"
            :before-upload="beforeNoticeUpload"
          >
            <img
              v-if="form.inmes_image"
              :src="form.inmes_image"
              class="notice"
            />
            <i v-else class="el-icon-plus notice-uploader-icon"></i>
          </el-upload>
          <div class="el-upload__tip">
            尺寸要求：330*330，JPG格式
          </div>
        </el-form-item>
        <el-form-item label="内容" prop="inmes_context">
          <el-input
            type="textarea"
            rows="3"
            placeholder="请输入"
            resize="none"
          ></el-input>
        </el-form-item>
      </div>
      <!--弹幕组-->
      <div v-if="diff === 'barrage'">
        <el-form-item label="弹幕图片" prop="barr_image">
          <el-upload
            class="notice-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleNoticeSuccess"
            :before-upload="beforeNoticeUpload"
          >
            <img v-if="form.barr_image" :src="form.barr_image" class="notice" />
            <i v-else class="el-icon-plus notice-uploader-icon"></i>
          </el-upload>
          <div class="el-upload__tip">
            尺寸要求：330*330，JPG格式
          </div>
        </el-form-item>
      </div>
      <!--公众号-->
      <div v-if="diff === 'public'">
        <el-form-item label="内容" prop="mes_context">
          <el-input
            v-model="form.mes_context"
            type="textarea"
            rows="3"
            placeholder="请输入"
            resize="none"
          ></el-input>
        </el-form-item>
      </div>
      <!--公众号-->
      <div v-if="diff === 'small'">
        <el-form-item label="内容" prop="mes_context">
          <el-input
            v-model="form.mes_context"
            type="textarea"
            rows="3"
            placeholder="请输入"
            resize="none"
          ></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="cancelLabel">
        取 消
      </el-button>
      <el-button type="success" @click.prevent="handelAdd">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'managementAddEdit',
  msg: '活动管理-新增/编辑弹窗',
  props: ['dialogData'],
  data() {
    return {
      isAdd: true, // 新增-true,编辑-false
      loading: true,
      // 推送类型(默认短信)
      diff: 'message',
      // 表单数据
      form: {
        rolesName: '',
        rolesChars: '',
        // 默认选择短信
        order: '短信',
        mes_context: '',
        push_title: '',
        push_context: '',
        inmes_title: '',
        inmes_receive: 'notice',
        inmes_context: '',
        inmes_image: '',
        barr_image: ''
      },
      formRules: {
        rolesName: [{ required: true, message: '请选择', trigger: 'blur' }],
        rolesChars: [{ required: true, message: '请选择', trigger: 'blur' }],
        order: [{ required: true, message: '弹窗', trigger: 'blur' }],
        reachDate: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        // 短信相关
        mes_context: [
          { required: true, message: '请输入短信内容', trigger: 'blur' },
          {
            min: 3,
            max: 300,
            message: '长度在 3 到 300 个字符',
            trigger: 'blur'
          }
        ],
        // 推送相关
        push_title: [
          { required: true, message: '请输入推送标题', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur'
          }
        ],
        push_context: [
          { required: true, message: '请输入推送内容', trigger: 'blur' },
          {
            min: 3,
            max: 300,
            message: '长度在 3 到 300 个字符',
            trigger: 'blur'
          }
        ],
        inmes_image: [
          { required: true, message: '请上传弹幕图片', trigger: 'change' }
        ],
        // 站内信相关
        inmes_title: [
          { required: true, message: '请输入站内信标题', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur'
          }
        ],
        inmes_context: [
          { required: true, message: '请输入站内信内容', trigger: 'blur' },
          {
            min: 3,
            max: 300,
            message: '长度在 3 到 300 个字符',
            trigger: 'blur'
          }
        ],
        // 弹幕相关
        barr_image: [
          { required: true, message: '请上传弹幕图片', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.isAdd = this.dialogData.type === 'add'
    if (this.dialogData.type === 'edit') {
      this.form = Object.assign({}, this.dialogData.params)
      var passage = this.dialogData.params.passage
      switch (passage) {
        // 短信
        case '短信':
          this.diff = 'message'
          this.form.order = '短信'
          break
        // 推送
        case '推送':
          this.diff = 'push'
          this.form.order = '推送'
          break
        // 站内信
        case '站内信':
          this.diff = 'inMessage'
          this.form.order = '站内信'
          break
        // 弹幕
        case '弹幕':
          this.diff = 'barrage'
          this.form.order = '弹幕'
          break
        // 公众号
        case '公众号':
          this.diff = 'public'
          this.form.order = '公众号'
          break
        // 小程序
        case '小程序':
          this.diff = 'small'
          this.form.order = '小程序'
          break
        // 默认短信
        default:
          this.diff = 'message'
          this.form.order = '短信'
          break
      }
    }
  },
  methods: {
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    // 取消
    cancelLabel() {
      this.loading = false
      this.dialogData.isShow = false
    },
    // 提交
    handelAdd() {
      this.$refs.addFormEl.validate((valid) => {
        if (!valid) {
          return
        }
        this.dialogData.isShow = false
        this.$emit('add-success')
      })
    },
    // 上传图片成功之后回调
    handleNoticeSuccess(res, file) {
      this.form.inmes_image = URL.createObjectURL(file.raw)
    },
    // 上传之前的判断
    beforeNoticeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 更改通知状态
    HandleChange() {
      var deff = this.form.order
      switch (deff) {
        // 短信
        case 'message':
          this.diff = 'message'
          break
        // 推送
        case 'push':
          this.diff = 'push'
          break
        // 站内信
        case 'inMessage':
          this.diff = 'inMessage'
          break
        // 弹幕
        case 'barrage':
          this.diff = 'barrage'
          break
        // 公众号
        case 'public':
          this.diff = 'public'
          break
        // 小程序
        case 'small':
          this.diff = 'small'
          break
        // 默认短信
        default:
          this.diff = 'message'
          break
      }
    }
  }
}
</script>
<style lang="less">
.el-dialog {
  border-radius: 4px;
  .el-dialog__header {
    border-bottom: 1px solid rgba(225, 228, 233, 1);
  }
  //upload image
  .notice-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .notice-uploader .el-upload:hover {
    border-color: #1dc8a4;
  }
  .notice-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .notice {
    width: 100px;
    height: 100px;
    display: block;
  }
  .el-upload__tip {
    margin-top: 0;
    color: #c0c4cc;
  }
}
</style>
